@import "@/theme";

.container{
  display: flex;
  align-items: center;
  width: 100%;
  height: 40px;
  background: #eee;
  margin-bottom: 15px;
}

.tabItem{
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 20px 0 20px;
  background: #fff;
  position: relative;
  cursor: pointer;

  &.active{
    background: $primary-color;
  }

  &.closable{
    padding-right: 10px;
  }

  //&:not(:first-child){
  //  &::before{
  //    $height: 60%;
  //    content: '';
  //    position: absolute;
  //    height: $height;
  //    width: 1px;
  //    background: #ddd;
  //    left: 0;
  //    top: calc(100% - #{$height})/2;
  //  }
  //}

  .btn{
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    overflow: hidden;
    margin-left: 20px;

    &:hover{
      cursor: pointer;
      background: #ddd;
    }
  }
}
